
<template>
  <div>
    <button v-on:click="add">新增</button>

    <div v-show="showAdd" class="divAdd">
      <input type="text" placeholder="请输入姓名" v-model="userName" />
      <input
        type="number"
        maxlength="2"
        placeholder="请输入年龄"
        v-model="userAge"
      />
      <button v-on:click="save">确定</button>
    </div>
{{userdata}}
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in peoples" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td v-bind:index="index">
          <button  v-on:click="eidt">编辑</button>
          <button v-on:click="deleteuser">删除</button>
        </td>
      </tr>
    </table>

    <footer-nav v-bind:class="{ isManage: isNowPage }"></footer-nav>
  </div>
</template>

<script>
import FooterNav from "../../components/footer.vue";
import Vue from "vue";
export default {
  components: {
    FooterNav,
  },
  data() {
    return {
      userName: "",
      userAge: "",
      userIndex: -1, //选中的用户索引 (-1:表示未选中)
      showAdd: false,
      isNowPage: true,
      // // 一个用户信息
      // userdata: {
      //   id: -1,
      //   name: "",
      //   password: "",
      //   password2: "",
      //   email: "",
      //   phonenumber: "",
      //   userimg: "", // 图片的相对路径 真正传递到后台的图片路径    
      // },
      peoples: [
        { name: "强哥1", age: "21" },
        { name: "强哥2", age: "31" },
        { name: "强哥3", age: "32" },
      ],
    };
  },
  methods: {
    
    //   添加
    add: function () {
      // this.clearuserdata();
      this.userIndex = -1;
      this.showAdd = true;
      this.userName = "";
      this.userAge = "";
    }, // 编辑
    eidt(e) {
      this.userIndex = Number(e.target.offsetParent.index);
      var id = this.userIndex;
      this.showAdd = true;
      this.userName = this.peoples[id].name;
      this.userAge = this.peoples[id].age;
    },
    // // 清空自定义用户数据
    // clearuserdata() {

    //   this.userdata.id = "00";
    //   this.userdata.name = "aa";
    //   this.userdata.password = "aa";
    //   this.userdata.password2 = "aa";
    //   this.userdata.email = "aa@com";
    //   this.userdata.phonenumber = "11836392373";
    //   this.userdata.userimg = "aa@com";
      
    // },
    // 删除
    deleteuser(e) {
      this.userIndex = Number(e.target.offsetParent.index);
      var id = this.userIndex;
      this.peoples.splice(id, 1);

      // Vue.delete( this.peoples, id);
      this.userIndex = -1;
    },
    // 保存
    save() {
      var people = {};
      people.name = this.userName;
      people.age = this.userAge;
      if (this.userIndex == -1) {
        // 添加保存

        this.peoples.unshift(people);
      } else {
        // 编辑保存
        var people = {};
        people.name = this.userName;
        people.age = this.userAge;
        var id = this.userIndex;

        this.peoples.splice(id, 1, people); // ok
        // Vue.set( this.peoples, id, people)
      }
      this.showAdd = false;
    },
  },
};
</script>
<style scoped>
input {
  width: 200px;
  height: 30px;
}
table {
  width: 100%;
  border: black 1px solid;
  margin-top: 10px;
}
th,
td {
  border: black 1px solid;
}
button {
  width: 100px;
  height: 30px;
}
.divAdd {
  margin-top: 10px;
}
</style>
